<template>
	<div class="">
		<naviHeader></naviHeader>
    
    <!-- 社群 -->
    <div class="community-container">
      <div class="item" v-for="item in communityColumn.list" :key="item.index">
        <div>
          <img class="badge" v-bind:src="item.img" alt="">
        </div>
        <div>
          <div>{{item.title}}</div>
          <div class="">{{item.description}}</div>
        </div>
        <div class="btn">加入群聊</div>
        </div>
    </div>

    <div class="description">
      <div>【社群描述】</div> 
      <div>本直播社群能容纳5000人，学员可在讨论区提问交流，也可在讲师区听课学习，还可将课程转播到自己的微信群！</div> 
      <div>【听课指南】</div> 
      <div>1、共同维护社群聊天室内文明风气，人人有责。</div> 
      <div>2、如遇手机加载不出来的情况，可以刷新或重新进入社群聊天室。</div> 
      <div>3、社群直播结束后，您可以随时回看全部内容。</div> 
    </div>
	</div>

</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";

export default {
  data() {
    return {
      communityColumn: {
        title: "社群",
        description: "兴趣 聚集",
        list: [
          {
            img:
              "http://img.jituwang.com/uploads/allimg/151003/258203-1510030RP894.jpg",
            title: "央央家学员群",
            description: "群成员列表（260人）"
          }
        ]
      }
    };
  },

  mounted() {
    // console.log(title, descriptions);
  },
  components: {
    naviHeader
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

// 社群
.community-container {
  @include fj(center);

  .item {
    margin: 0.2rem 0.1rem 0.2rem 0.1rem;
    text-align: center;
    width: 5rem;

    .badge {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      // margin: 0.2rem 0.1rem 0.2rem 0.1rem;
    }

    .text-ellipsis {
      width: 3rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }

    .btn {
      padding: 0.1rem;
      border: 2px solid #16e08f;
      border-radius: 25px;
      width: 5rem;
      color: #16e08f;
      margin: 0.2rem auto;
    }
  }
}


.description{
  @include sc(0.28rem, #888);
  background: #fff;
  padding: 0.4rem;
}

</style>
